<template>
  <div class="recommend">
    <div class="detail_faqbox">
      <div class="detail_faqbox_head">
        <div class="detail_faqbox_head_tit">问答专区</div>
        <div class="detail_faqbox_head_num">查看全部问答</div>
        <div class="detail_faqbox_head_empty" style="display:none">
          暂无提问信息，
          <span>去提问</span>
        </div>
      </div>
      <ul class="detail_faqbox_list">
        <li>
          <p class="detail_faqbox_list_desc">可以放电信卡吗？电信卡有4G网络吗？</p>
          <span class="detail_faqbox_list_num">共2个回答</span>
        </li>
        <li>
          <p class="detail_faqbox_list_desc">是曲屏吗？</p>
          <span class="detail_faqbox_list_num">共4个回答</span>
        </li>
      </ul>
    </div>
    <div class="detail_gap"></div>
    <div class="detail_shop_box_v3">
      <div class="shop_info">
        <span class="J_ping logo_wrap">
          <img
            src="//img30.360buyimg.com/popshop/jfs/t3076/77/986411587/6924/5438d55/57c3a815N4f3b8e07.jpg!q70.dpg"
          >
        </span>
        <div class="info">
          <div class="name">
            <span class="_n">中国移动手机官方旗舰店</span>
            <p class="desc">
              <span class="star">
                店铺星级
                <i class="star_icon"></i>
                <i class="star_icon"></i>
                <i class="star_icon"></i>
                <i class="star_icon"></i>
                <i class="star_icon half"></i>
              </span>
            </p>
          </div>
        </div>
      </div>
      <div class="info_tab">
        <div class="tab_item">
          <p class="num">158736</p>
          <p class="desc">粉丝人数</p>
        </div>
        <div class="tab_item">
          <p class="num">369</p>
          <p class="desc">全部商品</p>
        </div>
        <div class="evaluation">
          <div class="evaluation_wrap">
            <div class="evaluation_list">
              <span class="evaluation_list_head">评价</span>9.08 | 中
            </div>
            <div class="evaluation_list">
              <span class="evaluation_list_head">物流</span>9.50 | 高
            </div>
            <div class="evaluation_list">
              <span class="evaluation_list_head">售后</span>9.00 | 中
            </div>
          </div>
        </div>
      </div>
      <div class="shop_btns mod_btns">
        <button class="mod_btn">
          <i class="icon_unfavor">关注店铺</i>
        </button>
        <button class="mod_btn">
          <i class="icon_shop">进入店铺</i>
        </button>
      </div>
    </div>
    <div class="detail_gap"></div>
    <div class="detail_specBusiness">
      <ul class="specBusiness_list arrow_right">
        <li class="specBusiness public">
          <img
            class="business_icon"
            src="//img14.360buyimg.com/jdphoto/jfs/t14269/206/1377464630/417/1601d619/5a4dd753N5a33ba54.png">
          <h3 class="title">闲置回收</h3>
          <p class="business_detail">
            <span class="text">以旧换新</span>
          </p>
        </li>
        <li class="specBusiness public" style="display:none"></li>
      </ul>
    </div>
    <div class="detail_gap"></div>
    <div id="accessoryArea" class="detail_accessory">
      <div class="detail_accessory_head">
        <h3 class="detail_accessory_title">
          热门配件推荐
          <a href="javascript:;" class="detail_accessory_more">查看全部手机配件</a>
        </h3>
      </div>
      <ul class="detail_accessory_list">
        <li class="detail_accessory_list_item">
          <div class="detail_accessory_list_item_cover">
            <img
              src="//img12.360buyimg.com/img/jfs/t1/35794/7/2043/7048/5cb9ce74Eabf015ac/37b91e86245190d6.png"
              alt
            >
          </div>
          <p class="detail_accessory_list_item_name">移动电源</p>
        </li>
        <li class="detail_accessory_list_item">
          <div class="detail_accessory_list_item_cover">
            <img
              src="//img12.360buyimg.com/img/jfs/t1/30424/11/15586/30467/5cc27df0Eca5f38f6/e6612eb7fb630db5.png"
              alt
            >
          </div>
          <p class="detail_accessory_list_item_name">数据线</p>
        </li>
        <li class="detail_accessory_list_item">
          <div class="detail_accessory_list_item_cover">
            <img
              src="//img12.360buyimg.com/img/jfs/t1/40612/18/452/17692/5cc265b6Ed82d1bf5/24bbf9d972a05e1c.png"
              alt
            >
          </div>
          <p class="detail_accessory_list_item_name">蓝牙耳机</p>
        </li>
        <li class="detail_accessory_list_item">
          <div class="detail_accessory_list_item_cover">
            <img
              src="//img12.360buyimg.com/img/jfs/t1/43418/24/463/51435/5cc2674cE80cc404a/2a929c7ff34954a8.png"
              alt
            >
          </div>
          <p class="detail_accessory_list_item_name">手机耳机</p>
        </li>
        <li class="detail_accessory_list_item">
          <div class="detail_accessory_list_item_cover">
            <img
              src="//img12.360buyimg.com/img/jfs/t1/41793/24/486/17962/5cc26b5dEfb0c7cd1/30bf2d76b1a35b68.png"
              alt
            >
          </div>
          <p class="detail_accessory_list_item_name">充电器</p>
        </li>
        <li class="detail_accessory_list_item">
          <div class="detail_accessory_list_item_cover">
            <img
              src="//img12.360buyimg.com/img/jfs/t12952/348/1301331493/34007/33ddc215/5a1e278cN34f1a1d0.jpg"
              alt
            >
          </div>
          <p class="detail_accessory_list_item_name">拍照配件</p>
        </li>
        <li class="detail_accessory_list_item">
          <div class="detail_accessory_list_item_cover">
            <img
              src="//m.360buyimg.com/cc/jfs/t5701/222/22687215/14864/1ad98f4a/591467b4Ncbfed378.jpg"
              alt
            >
          </div>
          <p class="detail_accessory_list_item_name">手机支架</p>
        </li>
      </ul>
    </div>
    <div class="detail_gap"></div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.detail_faqbox {
  width: 100%;
  background: #fff;
  .detail_faqbox_head {
    position: relative;
    padding: 0 20px;
    height: 90px;
    line-height: 90px;
    font-size: 25.5px;
    color: #333;
    .detail_faqbox_head_num {
      position: absolute;
      top: 0;
      right: 28px;
      font-size: 21px;
      color: #666;
    }
    .detail_faqbox_head_num::after {
      position: relative;
      width: 20px;
      height: 20px;
      margin-top: -4px;
      margin-left: 8px;
      display: inline-block;
      vertical-align: middle;
      border-color: #666;
    }
    .detail_faqbox_head_empty {
      position: absolute;
      top: 0;
      right: 28px;
      font-size: 28px;
      color: #999;
      span {
        color: #3985ff;
      }
    }
  }
  .detail_faqbox_list {
    padding: 0 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    li {
      position: relative;
      height: 68px;
      line-height: 68px;
      .detail_faqbox_list_desc {
        padding-right: 160px;
        color: #333;
        font-size: 25.5px;
      }
      .detail_faqbox_list_desc::before {
        content: "Q";
        display: inline-block;
        margin: -2px 5px 0 0;
        width: 27px;
        height: 27px;
        line-height: 27px;
        border-radius: 2px;
        background-color: #ff9600;
        color: #fff;
        font-size: 12px;
        vertical-align: middle;
        text-align: center;
      }
      .detail_faqbox_list_num {
        position: absolute;
        top: 0;
        right: 0;
        color: #999;
        font-size: 22px;
      }
    }
  }
}
.detail_gap {
  padding-top: 20px;
  background: #e8e8ed;
  margin: -1px 0;
  position: relative;
  z-index: 2;
}
.detail_shop_box_v3 {
  padding: 20px;
  font-size: 22px;
  color: #333;
  background: #fff;
  .shop_info {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    left: 0;
    .logo_wrap {
      position: relative;
      display: inline-block;
      width: 163px;
      height: auto;
      padding-top: 0;
      margin-right: 20px;
      float: left;
      .shopLogo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
      }
      img {
        border: 0 none;
        display: block;
        width: 100%;
        height: 60px;
      }
    }
    .logo_wrap::after {
      border-color: #ddd;
    }
    .info {
      width: 50%;
      .name {
        margin: 0 192px 0 0;
        white-space: nowrap;
        line-height: 1em;
        ._n {
          display: inline-block;
          max-width: 100%;
          vertical-align: middle;
        }
        .desc {
          font-size: 20px;
          color: #999;
          line-height: 1em;
          margin-top: 10px;
          .star {
            margin-top: 10px;
            padding: 0 10px;
            background: #f7f7f7;
            height: 22px;
            line-height: 28px;
            font-size: 20px;
            color: #666;
            .star_icon {
              margin-left: 4px;
              display: inline-block;
              width: 20px;
              height: 20px;
              background-image: url("./images/tuijian_xing.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
            .star_icon.half {
              background-image: url("./images/tuijian_banxing.png");
            }
          }
        }
      }
    }
  }
  .info_tab {
    margin: 20px 0;
    display: flex;
    background: #ddd;
    .tab_item {
        flex: 1;
      position: relative;
      padding: 4px 0;
      text-align: center;
      background: #fff;
      .num {
        margin-bottom: 6px;
        font-size: 25.5px;
      }
      .desc {
        margin-top: 6px;
        font-size: 18.5px;
        color: #999;
      }
    }
    .tab_item:first-child:after {
      border-color: #ddd;
    }
    .evaluation {
      .evaluation_wrap {
        text-align: left;
        font-size: 10px;
        .evaluation_list {
            background: #fff;
        font-size: 18.5px;
          color: #e4393c;
          .evaluation_list_head {
            margin-right: 5px;
            color: #999;
          }
        }
      }
    }
  }
  .shop_btns {
    margin: 0;
  }
  .shop_btns.mod_btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    margin: 15px 10px;
    background: #ddd;
    .mod_btn {
        flex: 1;
      position: relative;
      border: none;
      margin: 1px 1px 0 1px;
      height: 55px;
      line-height: 55px;
      font-size: 25.5px;
      background-color: #fff;
      .icon_unfavor {
        top: -2px;
        width: 13px;
        height: 13px;
        margin-right: 4px;
        background-position: -2px -1px;
        vertical-align: middle;
      }
    }
    .mod_btn::after {
      border-color: #ccc;
      border-radius: 4px;
    }
    .mod_btn:last-child {
      margin-right: 0;
    }
  }
}
.detail_specBusiness {
  position: relative;
  .specBusiness_list {
    display: -webkit-box;
    display: box;
    display: -webkit-flex;
    display: flex;
    background: #fff;
    .specBusiness {
      width: 0;
      position: relative;
      padding: 24px 0;
      white-space: normal;
      display: block;
      width: 100%;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .business_icon {
        position: absolute;
        display: block;
        top: 30px;
        left: 11px;
        width: 28px;
        height: 28px;
      }
      .title {
        position: relative;
        padding: 0 0 3px 60px;
        font-weight: 400;
        font-size: 25.5px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .business_detail {
        padding-left: 60px;
        font-size: 22px;
        .text {
          display: block;
          position: relative;
          color: #999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .specBusiness_list.arrow_right {
    display: block;
    .specBusiness {
      width: 100%;
      .business_detail {
        padding-right: 25px;
        .text {
          white-space: normal;
        }
      }
    }
    .specBusiness::before {
      border-color: #666;
      right: 18px;
      margin-top: -6px;
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
      position: absolute;
      top: 50%;
      width: 20px;
      height: 20px;
      border-top: 1px solid #7d7d7d;
      border-left: 1px solid #7d7d7d;
      background: none;
      content: "\20";
      display: block;
    }
    .specBusiness::after {
      left: 10px;
      content: "";
      height: 0;
      display: block;
      border-top: 1px solid #ddd;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
.detail_accessory {
  background-color: #fff;
  padding-bottom: 100px;
  .detail_accessory_head {
    position: relative;
    padding: 26px 20px 22px;
    .detail_accessory_title {
      font-size: 25.5px;
      color: #333;
      font-weight: 400;
      .detail_accessory_more {
        position: absolute;
        top: 0;
        right: 30px;
        font-size: 22px;
        color: #999;
        height: 82px;
        line-height: 82px;
      }
      .detail_accessory_more::after {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-top: 1px solid #666;
        border-left: 1px solid #666;
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        display: inline-block;
      }
    }
  }
  .detail_accessory_list {
    font-size: 0;
    font-family: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    overflow-x: auto;
    margin: 0 0 20px 20px;
    .detail_accessory_list_item {
      position: relative;
      margin-right: 20px;
      display: inline-block;
      vertical-align: top;
      font-family: -apple-system, Helvetica, sans-serif;
      .detail_accessory_list_item_cover {
        position: relative;
        width: 180px;
        height: 120px;
        img {
          display: block;
          width: 100%;
        }
      }
      .detail_accessory_list_item_cover::after {
        content: "";
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #e5e5e5;
        border: 1px solid #ddd;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        background: none;
        border-color: #e5e5e5;
      }
      .detail_accessory_list_item_name {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 38px;
        line-height: 38px;
        font-size: 25.5px;
        color: #f2f2f7;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
